<template>

  <card-component
    :content-title="contentTitle"
    :page="page"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange">

    <div slot="action">
      <!--<action-componet-->
                       <!--:device-choose="deviceChoose"-->
                       <!--:device-list="deviceList"-->
                       <!--:user-choose="userChoose"-->
                       <!--:user-list="userList"-->
                       <!--:stand-choose="standChoose"-->
                       <!--:stand-list="standList"-->
                       <!--:begin-date="beginDate"-->
                       <!--:over-date="overDate"-->
                       <!--:chanxian='chanxian'-->
                       <!--:program="program"-->

                       <!--:isShowDeleteButton="isShowDeleteButton"-->
                       <!--:isShowCancelLightButton="isShowCancelLightButton"-->

                       <!--@updateValue="updateValue"-->
                       <!--@searchData="searchData"-->
                       <!--@confrimDialog="confrimDialog"></action-componet>-->

      <!--<el-button class='el-button-delete-data' :loading="isDeleteBtnLoading" type="danger" v-show="isShowDeleteButton"-->
                 <!--@click="deleteSelectionData">删除勾选的数据-->
      <!--</el-button>-->

      <!--<el-button class='el-button-delete-data' :loading="isCancelLightBtnLoading" type="primary"-->
                 <!--v-show="isShowCancelLightButton"-->
                 <!--@click="cancelLightSelectionData">取消高亮-->
      <!--</el-button>-->
    </div>



    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     :page="page"
                     @handleEdit="handleEdit"
                     @handleDelete="handleDelete"
                     @handleSelectionChange="handleSelectionChange"></table-component>


    <remark-dialog
      slot="dialog"
      :dialogVisible="dialogVisible"
      :formData="formData"
      :rowIndex="rowIndex"
      @cancelDialog="cancelDialog1"
      @confrimDialog="confrimDialog1"
    ></remark-dialog>
  </card-component>

</template>

<script>

  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import action from '@/base/action.vue'
  import request from '@/common/js/request'
  import remarkDialog from '@/base/surplusTotalAmountDialog.vue'

  import util from '@/common/js/util'

  export default {
    data() {
      return {
        chanxian: '',
        contentTitle: this.$getTextByLangKey("站位余量"),

        program: '',

        isShowDeleteButton:false,
        isShowCancelLightButton:false,

//
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },

        //        这是实现自动刷新功能的
        timer: '',
        isRequesting: false,

        dialogVisible: false,
        formData: {
          totalAmount: 0
        },
        rowIndex: 0,
      }
    },
    created: function () {

      this.fetchData()
    },

    destroyed: function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {

        this.stopTimer()
        this.chanxian = this.$route.query.chanxian
        this.program = this.$route.query.program

        this.contentTitle = this.program + this.$getTextByLangKey("站位余量")

        request.requestSurplusList(this.chanxian, this.program, res => {
          console.log(res)
          this.tableHeader = this.makeScanHeader(res.data.data.headers)
          this.tableData = this.makeScanList(res.data.data.surplus)
        })

        this.creatTimer()
      },


      creatTimer: function () {
        this.autoRequest()
        this.timer = setInterval(() => {
          if (!this.isRequesting) {
//            console.log('开始自动请求')
            this.autoRequest()
          } else {
//            console.log('请求结果未返回')
          }
        }, 1000)
      },
      stopTimer: function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      autoRequest: function () {
        this.isRequesting = true
        console.log('请求余量状况')
        request.requestSurplusList(this.chanxian, this.program, res => {
          console.log(res)
          this.isRequesting = false
          this.tableHeader = this.makeScanHeader(res.data.data.headers)
          this.tableData = this.makeScanList(res.data.data.surplus)
        }, res => {
          this.isRequesting = false
        })
      },


      handleEdit: function (index, row) {
        this.formData = util.deepCopy(row)
        this.rowIndex = index
        this.dialogVisible = true
        console.log('row',row)

      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
      },

      handleSelectionChange(val) {
        if (val.length > 0) {
          this.isShowDeleteButton = true
          this.isShowCancelLightButton = true
        } else {
          this.isShowDeleteButton = false
          this.isShowCancelLightButton = false
        }

      },


      confrimDialog: function (excelForm) {
        Request.requestExportScanList(this, this.chanxian, this.program, this.deviceChoose, this.standChoose, this.beginDate, this.overDate, excelForm)
      },

      cancelDialog1: function () {
        this.dialogVisible = false;
      },
      confrimDialog1: function (val, index) {
        this.dialogVisible = false;

        let data = {id: val.id, totalAmount: val.totalAmount}

        request.requestUpdateTotalAmount(data, res => {

          this.fetchData()
          util.showSuccessToast(this.$getTextByLangKey('修改成功'))
        })

      },

      makeScanHeader: function (list) {
        let actionItem = {type: "action", label: this.$getTextByLangKey('操作'), isShow: true}
        let header = [ ]
        list.forEach(function (item) {
          item.isShow = true
          header.push(item)
        }, this)
        header.push(actionItem)
        return header
      },


      makeScanList: function (list) {

        let data = []
        list.forEach(function (item) {
          item.danger={}
          item.warning={}
          if(item.surplus<=0){
            item.danger.surplus = true
          }else if(item.surplus>0&&item.surplus<=200){
            item.warning.surplus = true
          }
          item.action = 'edit'
          data.push(item)
        }, this)

//        console.log('hehehehhehhhhhhhhh')
//        console.log(data)
        return data

      },

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time)
          return date.toLocaleDateString() + ' ' + date.toTimeString().split(' ')[0]
        }

        return ''

      },
    },
    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': action,
      'remark-dialog': remarkDialog,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


